<template>
  <view class="page">
    <view class="content-list">
      <view class="content" v-for="(child, i) in holidayList" :key="i">
        <view class="item-title" @click="active = i">
          <view>{{ child.holidayTitle }}</view>
          <img
            class="icon-arrow"
            :class="[active === i ? 'active' : '']"
            src="@/static/images/calendar/icon-arrow.png"
            alt=""
          />
        </view>
        <view v-if="active === i">
          <view
            style="margin-top: 25rpx"
            class="holiday_item"
            v-for="(item, index) in child.list"
            :key="index"
          >
            <view class="item_detail">
              <view>{{ item.holidaylName }}</view>
              <view>{{ item.holidayDate }}</view>
            </view>
            <view class="item_detail">
              <view style="color: #999">{{ item.holidayDescription }} </view>
              <view style="color: #ca4336" @click="skip(item.jumpPath)">{{
                item.jumpPath ? "节日活动-" : ""
              }}</view>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>
    
<script>
import { getHolidayListApi, getChannelShopTypeApi } from "@/http/api";
export default {
  data() {
    return {
      active: 0,
      holidayList: [],
      dict: [],
    };
  },

  methods: {
    getHolidayList() {
      getHolidayListApi().then((res) => {
        const { data, code } = res;
        if (code === 200) {
          // this.holidayList = data;
          //遍历data将dictValue转换为对应的dictLabel
       
          this.holidayList = data.map((item) => {
            return {
              ...item,
              holidayTitle: this.dict.find((dictItem) => {
                return dictItem.key === item.title;
              }).value,
            };
          });
         
        }
      });
    },
    getHolidayDict() {
      getChannelShopTypeApi().then((res) => {
        const { data, code } = res;
        if (code === 200) {
          this.dict = data.map((item) => {
            return {
              key: item.dictValue,
              value: item.dictLabel,
            };
          });

          this.getHolidayList();
        }
      });
    },
    skip(url) {
      //打开其它窗口
      window.open(url);
    },
  },
  created() {
    this.getHolidayDict();
    // this.getHolidayList();
  },
};
</script>
  
  <style lang="scss" scoped>
.page {
  background: #f9f9f9;
  height: 100vh;
  width: 100vw;
  // padding: 35rpx;
}
.example-body {
  flex-direction: column;
  flex: 1;
}

.content-list {
  padding: 15rpx;
}

.content {
  padding: 24rpx 25rpx;
  margin-top: 24rpx;
}

.item_detail {
  display: flex;
  justify-content: space-between;
}

.holiday_item {
  // border-bottom: 2rpx solid #eee;
  // padding: 20rpx 0;
}

.content {
  background: #ffffff;
  border-radius: 12rpx;
}
.item-title {
  display: flex;
  justify-content: space-between;
  align-items: center;

  img {
    width: 20rpx;
    height: 11rpx;
    //向右旋转90度
    transform: rotate(270deg);
  }
}
.active {
  transform: rotate(0) !important;
}
</style>